/**
 * @description 所有图表的容器
 */

import ChartEntry from "@/components/Echart"
import { useEffect, useState } from "react"

// 盒子装修的列表
const list = [
  {
    title: '1',
    graphType: null
  },
  {
    title: '2',
    graphType: null
  },
  {
    title: '3',
    graphType: null
  },
  {
    title: '4',
    graphType: null
  },
  {
    title: '5',
    graphType: null
  },
]

// 折线图装修的列表
const LineList = [
  {
    title: '折',
    graphType: '折'
  },
  {
    title: '折滑',
    graphType: '折滑'
  },
  {
    title: '折面',
    graphType: '折面'
  },
  {
    title: '折滑面',
    graphType: '折滑面'
  },
  {
    title: '折多',
    graphType: '折多'
  },
]

// 柱状图装修的列表
const BarList = [
  {
    title: '柱状图-横',
    graphType: '横'
  },
  {
    title: '柱状图-竖',
    graphType: '竖'
  },
  {
    title: '3',
    graphType: null
  },
  {
    title: '4',
    graphType: null
  },
  {
    title: '5',
    graphType: null
  },
]

// 饼图装修的列表
const PieList = [
  {
    title: '饼',
    graphType: '饼'
  },
  {
    title: '饼2',
    graphType: '饼2'
  },
  {
    title: '饼3',
    graphType: '饼3'
  },
  {
    title: '4',
    graphType: null
  },
  {
    title: '5',
    graphType: null
  },
]

// 漏斗装修的列表
const FunnelList = [
  {
    title: '漏',
    graphType: '漏'
  },
  {
    title: '漏多1',
    graphType: '漏多1'
  },
  {
    title: '漏多2',
    graphType: '漏多2'
  },
  {
    title: '漏多3',
    graphType: '漏多3'
  },
  {
    title: '漏多4',
    graphType: '漏多4'
  },
]

// 仪表盘装修的列表
const GaugeList = [
  {
    title: '仪表盘',
    graphType: '仪'
  },
  {
    title: '2',
    graphType: null
  },
  {
    title: '3',
    graphType: null
  },
  {
    title: '4',
    graphType: null
  },
  {
    title: '5',
    graphType: null
  },
]

// 仪表盘装修的列表
const WordCloud = [
  {
    title: '词云',
    graphType: '词云'
  },
  {
    title: '2',
    graphType: null
  },
  {
    title: '3',
    graphType: null
  },
  {
    title: '4',
    graphType: null
  },
  {
    title: '5',
    graphType: null
  },
]

function HomeChartList({ chartTap, actKey, chart, base }) {

  const [actList, setActList] = useState([])

  useEffect(() => {
    let newList = list
    // 图表装修tab
    if (actKey == 'chart') {

      switch (chartTap) {

        case 'line':
          newList = LineList
          break;

        case 'bar':
          newList = BarList
          break;

        case 'pie':
          newList = PieList
          break;

        case 'funnel':
          newList = FunnelList
          break;

        case 'gauge':
          newList = GaugeList
          break;

        case 'wordCloud':
          newList = WordCloud
          break;


        default:
          break;
      }
    }

    setActList(newList)
  }, [chartTap, actKey])


  return (
    <>
      {
        actList.map((configData, index) =>
          <ChartEntry
            key={configData.title}
            className={`chart-wrapper-common chart-wrapper-${index + 1} animate__animated animate__${base[`chart_animate${index + 1}`]}`}
            configData={configData}
            chart={chart}
          />
        )
      }
    </>

  )
}

export default HomeChartList